<html>
  <head>
    <title>CSS level 3 'transform' demo</title>
    <style>

      @import url(../note.css); 

      html { background:transparent; }
      p
      {
        behavior:check;
        font:18pt verdana;
        padding:15px;
        margin:40px;
        background-image:url(images/stretchable.png); 
        background-position:16px 16px 16px 16px; /*top right bottom left offsets*/
        background-repeat:expand stretch-top stretch-bottom stretch-middle; /* h-smile specific */
      }
      
      p.rotated 
      {
        margin:0;
        width:max-intrinsic;
        transform-origin:left bottom;
        transition: transform bounce-in 0.5s;
        //transform:rotate(0deg);
      }
      
      p.rotated:checked
      {
        transform:rotate(90deg);
      }
      
      p.translated
      {
        transition: transform linear 0.5s;        
      }
      p.translated:checked
      {
        transform:translate(40px,0);
      }
      
      p.skew
      {
        transition: transform linear 0.5s;
      }
      
      p.skew:checked
      {
        transform-origin:left center;
        transform:skew(45deg,0) scale(1.0,0.6);
      }
      p.scale
      {
        width:25%;
        margin:0 *;
        transition: transform bounce-in 0.5s;
      }
     
      p.scale:checked
      {
        transform:scale(2);
      }
      
       p.rotated-scaled 
      {
        margin:40px *;
        width:max-intrinsic;
        //transform-origin:left bottom;
        transition: transform quart-out 0.5s;
      }
      
      p.rotated-scaled:checked
      {
        transform:rotate(30deg) scale(.5);
        
      }
    
    </style>
  </head>
<body>
  
  <note>Click on element to see the effect</note>

  <p class="rotated">Rotated <a href="#">ht</a></p>
  <p class="translated">Translated <a href="#">ht</a></p>
  <p class="scale">Scale <a href="#">ht</a></p>
  <p class="skew">Skew <a href="#">ht</a></p>
  <p class="rotated-scaled">Rotated and scaled <a href="#">ht</a></p>
  

</body>
</html>
